<template>
  <div class="list">
    <div class="item" :class="{'item-active': curTab === 5}" @click="onTabChange(5)">
      审核通过.{{ data.valid_num || 0 }}
    </div>
    <div class="item" :class="{'item-active': curTab === 0}" @click="onTabChange(0)">
      审核中.{{ data.validing_num || 0 }}
    </div>
    <div class="item" :class="{'item-active': curTab === 6}" @click="onTabChange(6)">
      未通过.{{ data.fail_num || 0 }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      curTab: 5
    }
  },
  methods: {
    onTabChange(value) {
      this.curTab = value
      this.$emit('update', value)
    }
  }
}
</script>

<style lang="scss" scoped>
	.list {
		display: flex;
		align-items: center;
		column-gap: 20rpx;

		.item {
			width: 148rpx;
			height: 50rpx;
			background: #ECECEC;
			border-radius: 6rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-weight: 400;
			font-size: 24rpx;
			color: rgba(0, 0, 0, 0.5);
			line-height: 34rpx;
			text-align: right;
			font-style: normal;

			&-active {
				background: #D8D8D8;
				font-weight: 500;
				color: #000000;
			}
		}
	}
</style>
